<template>
    <div>
        <el-form label-width="100px" :inline="true">
            <el-form-item label="省份">
                <el-select
                        v-model="searchForm.province_id"
                        placeholder="请选择省份"
                        @change="getCitysList()"
                        clearable
                >
                    <el-option v-for="item in provinceList"
                               :key="item.id"
                               :label="item.district"
                               :value="item.id"

                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="城市">
                <el-select
                        placeholder="请选择城市"
                        v-model="searchForm.city_id"
                        @change="getDistrictList()"
                        clearable
                >
                    <el-option v-for="item in cityList"
                               :key="item.id"
                               :label="item.district"
                               :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="区县">
                <el-select
                        v-model="searchForm.district_id"
                        placeholder="请选择县区"
                        @change="getVillageList()"
                        clearable
                >
                    <el-option v-for="item in districtList"
                               :key="item.id"
                               :label="item.district"
                               :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="乡镇">
                <el-select v-model="searchForm.village_id" placeholder="请选择乡镇"
                           clearable>
                    <el-option v-for="item in villageList"
                               :key="item.code"
                               :label="item.name"
                               :value="item.code"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label=" ">
                <el-button @click="handleSearch()" icon="el-icon-search" type="primary"
                >查询
                </el-button>
                <el-button @click="handleReset()">重置</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    import {getVillage} from "@/api/village/village";
    import {regionProvince, regionCity, regionCounty} from "@/api/region/region";

    export default {
        props: [],
        components: {},
        data() {
            return {
                //省
                provinceList: [],
                //市
                cityList: [],
                //区县
                districtList: [],
                //乡镇
                villageList: [],
                searchForm: {
                    province_id: "",
                    city_id: "",
                    district_id: "",
                    village_id: "",
                },
            }
        },
        created() {
            this.getProvincesList();
        },
        methods: {
            //获取省份
            getProvincesList() {
                regionProvince().then(res => {
                    if (res.code == "200") {
                        this.provinceList = res.data;
                    }
                });
            },
            //获取城市
            getCitysList() {
                regionCity({pid: this.searchForm.province_id}).then(res => {
                    if (res.code == "200") {
                        this.cityList = res.data;
                    }
                });
            },
            //获取区县
            getDistrictList() {
                regionCounty({pid: this.searchForm.city_id}).then(res => {
                    if (res.code == "200") {
                        this.districtList = res.data;
                    }
                });
            },
            //获取乡镇
            getVillageList() {
                getVillage({pid: 0, district_id: this.searchForm.district_id}).then(res => {
                    if (res.code == "200") {
                        this.villageList = res.data;
                    }
                });
            },
            //父页面的回调事件
            handleParentEvent() {
                this.$emit('setSearchForm', this.searchForm)
            },
            //创建
            handleSearch() {
                this.handleParentEvent()
            },
            handleReset() {
                this.searchForm = {};
                this.handleParentEvent()
            },
        }
    }
</script>

<style scoped>

</style>
